<!DOCTYPE html>
<html lang="en">
<head>
    <title>Scanner.js demo: Get started with options</title>
    <meta charset='utf-8'>
    <script>
        window.scannerjs_config = {
            eager_init: true, // true (default): initialize on start; false: you need to manually call scanner.initialize()

            display_install_func: null, // specify a func(Boolean show) to be called to show/hide scan app prompt dialog
            display_scan_ready_func: null, // specify a func() to be called upon scanning is enabled
            skip_load_default_css: false, // false (default): loading css styling for the default dialog; true: skip loading

            event_listener: null, // specify a func(String eventName, Object details) for listening events like scanner.EVENT_READY

            log_level: 0, // 0 (default): log all;  16: log error only; 1024: log nothing

            scan_app_enabled: true, // true (default): enable scan app; false: disable scan app
            scan_app_download_url: 'http://asprise.azureedge.net/scanapp/scan-setup.exe', // scan app download url
            java_applet_enabled: true, // false (default): don't use Java applet even if the browser supports it; true: enable Java applet support

            form_field_name_for_img_objects: 'com_asprise_scannerjs_images[]', // the name of the form field for direct file uploading
            form_field_name_for_img_urls: 'com_asprise_scannerjs_images_urls[]', // the name of the form field for URL only uploading
        };
    </script>
    <!--<script src="https://asprise.azureedge.net/scannerjs/scanner.js" type="text/javascript"></script>-->
    <script src="https://asprise.azureedge.net/scannerjs/scanner.js" type="text/javascript"></script>

    <script>
        //
        // Please read scanner.js developer's guide at: http://asprise.com/document-scan-upload-image-browser/ie-chrome-firefox-scanner-docs.html
        //

        /** Initiates a scan */
        function scanToJpg() {
            scanner.scan(displayImagesOnPage,
                {
                    "output_settings": [
                        {
                            "type": "return-base64",
                            "format": "jpg"
                        }
                    ]
                }
            );
        }

        /** Processes the scan result */
        function displayImagesOnPage(successful, mesg, response) {
            if(!successful) { // On error
                console.error('Failed: ' + mesg);
                return;
            }

            if(successful && mesg != null && mesg.toLowerCase().indexOf('user cancel') >= 0) { // User cancelled.
                console.info('User cancelled');
                return;
            }

            var scannedImages = scanner.getScannedImages(response, true, false); // returns an array of ScannedImage
            for(var i = 0; (scannedImages instanceof Array) && i < scannedImages.length; i++) {
                var scannedImage = scannedImages[i];
                processScannedImage(scannedImage);
            }
        }

        /** Images scanned so far. */
        var imagesScanned = [];

        /** Processes a ScannedImage */
        function processScannedImage(scannedImage) {
            imagesScanned.push(scannedImage);
            var elementImg = scanner.createDomElementFromModel( {
                'name': 'img',
                'attributes': {
                    'class': 'scanned',
                    'src': scannedImage.src
                }
            });
            document.getElementById('images').appendChild(elementImg);
        }

    </script>

    <style>
        img.scanned {
            height: 200px; /** Sets the display size */
            margin-right: 12px;
        }

        div#images {
            margin-top: 20px;
        }
    </style>
</head>
<body>

<h2>Scanner.js: configuration options</h2>

<script>
try {
    var confAsString = JSON.stringify(window.scannerjs_config, null, '  ');
    document.write('<pre>window.scannerjs_config = ' + confAsString + '</pre>');
} catch (e) {
    console.error(e);
}
</script>

<button type="button" onclick="scanToJpg();">Scan</button>

<div id="images"></div>

    <!-- HELP_LINKS_START help links at the bottom -->
    <style>
        .asprise-footer, .asprise-footer a:visited { font-family: Arial, Helvetica, sans-serif; color: #999; font-size: 13px; }
        .asprise-footer a {  text-decoration: none; color: #999; }
        .asprise-footer a:hover {  padding-bottom: 2px; border-bottom: solid 1px #9cd; color: #06c; }
    </style>
    <div class="asprise-footer" style="margin-top: 48px;">
        <a href="http://asprise.com/document-scan-upload-image-browser/direct-to-server-php-asp.net-overview.html" target="_blank" title="Opens in new tab">Scanner.js Homepage</a> |
        <a href="http://asprise.com/scan/scannerjs/docs/html/scannerjs-javascript-guide.html" target="_blank" title="Opens in new tab">Developer's Guide to ScannerJs</a> |
        <a href="https://github.com/Asprise/scannerjs.javascript-scanner-access-in-browsers-chrome-ie.scanner.js" target="_blank" title="Opens in new tab">Sample code on Github</a>
    </div>
    <!-- HELP_LINKS_END -->
</body>
</html>